<template>

  <el-form :inline="true" :model="query" style="margin-bottom: 10px">
    <el-form-item label="状态">
      <el-select v-model="query.info_status" @change="getPage(1)">
        <el-option label="全部" value=""></el-option>
        <el-option
          :label="item.label"
          :value="item.value"
          v-for="item in ddo.dataStatus"
          :key="item.value"
        ></el-option>
      </el-select>
    </el-form-item>
    <!-- <el-form-item label="编号">
      <el-input v-model="query.info_id"></el-input>
    </el-form-item> -->
    <el-form-item label="名称">
      <el-input v-model="query.info_name"></el-input>
    </el-form-item>
    <el-form-item label="备注">
      <el-input v-model="query.info_remark"></el-input>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="getPage(1)">查询</el-button>
      <template v-if="query.info_status == '00'">
        <el-button type="primary" @click="openAdd">新增</el-button>
        <el-button type="primary" @click="execMultiDel">删除</el-button>
      </template>
    </el-form-item>
  </el-form>

  <el-table
    :data="page.list"
    :stripe="true"
    :fit="true"
    :max-height="tableMaxHeight"
    style="width: 100%; flex: auto"
    @selection-change="handleSelectionChange"
  >
    <el-table-column type="selection" width="55" />
    <el-table-column prop="info_name" label="名称" />
    <el-table-column prop="info_remark" label="备注" />
    <el-table-column prop="info_status" label="状态">
      <template #default="{ row }">
        <span
          :style="{
            color: ddo.dataStatusColorMap[row.info_status],
            fontWeight: 'bold',
          }"
          >{{ ddo.text("dataStatus", row.info_status) }}</span
        >
      </template>
    </el-table-column>
    <el-table-column fixed="right" label="操作" width="200">
      <template #default="{ row }">
        <el-button
          v-if="row.info_status == '00'"
          size="small"
          @click="openEdit(row)"
          >编辑</el-button
        >
        <el-button
          v-if="row.info_status == '00'"
          size="small"
          type="danger"
          @click="execDel(row)"
          >删除</el-button
        >
        <el-button
          v-if="row.info_status == '00'"
          size="small"
          type="primary"
          @click="changeStatus(row)"
          >确定</el-button
        >
        <el-button
          v-if="row.info_status == '22' || row.info_status == '77'"
          size="small"
          type="success"
          @click="changeStatus(row)"
          >启用</el-button
        >
        <el-button
          v-if="row.info_status == '55'"
          size="small"
          type="danger"
          @click="changeStatus(row)"
          >禁用</el-button
        >

        
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
    style="margin-top: 22px"
    layout="sizes,prev, pager, next, jumper, ->, total"
    :total="page.total"
    v-model:page-size="query.pageSize"
    v-model:current-page="query.pageNum"
    :page-sizes="[1, 3, 5, 10, 15, 20, 30, 100]"
    @current-change="getPage"
    @size-change="getPage(1)"
  />

  <!-- 新增 -->
  <info-add ref="infoAddRef" @ok="getPage(page.last + 1)"></info-add>

  <!-- 修改 -->
  <info-upd ref="infoUpdRef" @ok="getPage(page.current)"></info-upd>

  
</template>

<script setup >
import { ref, reactive, onMounted, computed, watch } from "vue";
import { useRouter, useRoute } from "vue-router";
import { tip, get, post, put, del, ddo, elConfirm } from "@/common";

const tableMaxHeight = computed(() => ddo.windowInnerHeight - 325);

//多选处理
const multipleSelection = ref([]);
const handleSelectionChange = (selection) => {
  multipleSelection.value = selection;
};



const route = useRoute();
//信息类型名称
const info_type_name = computed(() => ({ customer: '客户信息', standard: '规格信息', color: '花色号信息' })[route.params.info_type]);

//信息类型编号
const info_type_code = computed(
  () => ({ customer: 1, standard: 2, color: 3 }[route.params.info_type])
);

//监听路由参数改变
watch(
  () => route.params.info_type,
  (toType, previousType) => {
    console.log(previousType,"===============================",toType);
    query.info_type = info_type_code.value;
    query.info_status = '00';
    getPage(1);
  }
);


//获取列表数据
const query = reactive({
  pageNum: 1,
  pageSize: 5,
  info_type:info_type_code.value,//初始化时，直接从路由获取信息类型
  info_name: "",
  info_remark: "",
  info_status: "00",
});
const page = ref({ total: 0 });

const getPage = (pageNo) => {
  query.pageNum = pageNo || 1;
  //const params = {...query,info_type:info_type_code.value}
  get("/info", query).then((result) => {
    page.value = result.data;
    query.pageNum = page.value.current;
    query.pageSize = page.value.pageSize;
  });
};

getPage(1);

//新增
import InfoAdd from "./info-add.vue";
const infoAddRef = ref();
const openAdd = () => {
  infoAddRef.value.open(info_type_code,info_type_name);
};

//修改
import InfoUpd from "./info-upd.vue";
const infoUpdRef = ref();
const openEdit = (row) => {
  infoUpdRef.value.open(info_type_code,info_type_name,row);
};

//删除
const execDel = (row) => {
  console.log(`/info/${info_type_code.value}/${row.info_id}`);
  elConfirm("提示", `您确定删除该条${info_type_name.value}吗？`).then(() => {
    del(`/info/${info_type_code.value}/${row.info_id}`).then((result) => {
      getPage(page.value.current);
      tip.success(`删除${info_type_name.value}成功！`);
    });
  });
};

const execMultiDel = () => {
  if (multipleSelection.value.length == 0) {
    tip.error(`请选择${info_type_name.value}！`);
    return;
  }
  elConfirm("提示", `您确定删除选中的${info_type_name.value}吗？`).then(() => {
    const ids = [];
    multipleSelection.value.forEach((row) => ids.push(row.info_id));
    del(`/info/${info_type_code.value}`, ids).then((result) => {
      getPage(page.value.current);
      tip.success(`删除${info_type_name.value}成功！`);
    });
  });
};

//改变状态
const changeStatus = (row) => {
  put(
    `/info/${info_type_code.value}/${row.info_id}/${row.info_status}`,
    {},
    { title: "提示", message: `您确定更新${info_type_name.value}状态吗？` }
  ).then((result) => {
    tip.success(result.message);
    console.log("query->", query, "current->", page.value.current);
    getPage(page.value.current);
  });
};
</script>

<style scoped>
.x {
}
</style>